<!--
 * @Author: your name
 * @Date: 2022-01-22 15:41:10
 * @LastEditTime: 2022-01-26 14:48:39
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \json-serveg:\桌面2\VueStudy\vue-ego\vue-ego\src\views\Goods\Goods.vue
-->
<template>
  <div class="goods">
      <!-- 搜索区域 -->
      <div class="header">
        <el-input @change='changeSearch'  v-model="input" placeholder="请输入内容"></el-input>
        <el-button type="primary">查询</el-button>
        <el-button type="success">
          <router-link to="/add-goods" style="color:#fff;">页面添加</router-link>
          </el-button>
        <el-button type="success" @click="addDialogGoods">弹窗添加</el-button>
      </div>

      <!-- 表格视图区域 -->
      <div class="wrapper">
        <template>
          <el-table
            :data="tableData"
            border
            style="width: 100%">
            <el-table-column
              type="selection"
              width="55">
            </el-table-column>
            <el-table-column
              prop="id"
              label="商品ID"
              width="100">
            </el-table-column>
            <el-table-column
              prop="title"
              label="商品名称"
              width="100"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              prop="price"
              label="商品价格"
              width="100"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              prop="num"
              label="商品数量"
              width="100"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              prop="category"
              label="规格类目"
              width="100"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              prop="image"
              label="商品图片"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              prop="sellPoint"
              label="商品卖点"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              prop="descs"
              label="商品描述"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              
              label="操作"
              width="220">
              <template slot-scope="scope">
                 <el-button
                  size="mini"
                  >查看</el-button>
                <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </div>

      


      <!-- 分页 -->
      <MyPagination :total='total' :pageSize='pageSize' @changePage='changePage' :currentPage.sync='currentPage'/>

      <!-- 添加商品弹出框 -->
      <!-- <GoodsDialog :dialogVisible='dialogVisible' @changeDialog='changeDialog'/> -->

      <!-- 通过打表示的ref传参 -->
      <GoodsDialog ref="dialog" :title="title" :rowData="rowData"/>


  </div>
</template>

<script>
import MyPagination from '../../components/MyPagination.vue'
import GoodsDialog from './GoodsDialog.vue'
export default {
    name:'Goods',
    data() {
      return {
        tableData: [],//表格里的数据
        total:10, //每页显示的数量
        pageSize:1, //显示的页面数
        input:'',
        type:1,//定义搜索状态
        list:[],
        dialogVisible: false,
        currentPage:1,//初次默认渲染的页码数,
        title:'添加商品', //弹窗的标题
        rowData:{}  //给子组件传递编辑的商品数据
      }
    },
    components:{
      MyPagination,
      GoodsDialog
    },
    methods: {
      //传入子组件页码
      changePage(num){
        this.currentPage = num
        if (this.type == 1) {
           this.pageList(num)
        } else {
          this.tableData = this.list.slice((num-1)*3,num*3)
        }
         
      },
      //获取商品列表
      pageList(page){
        this.$api.getGoodsList({
        page
      }).then((res) => {
        // console.log('获取商品列表',res.data)
        this.tableData = res.data.data
        this.pageSize =res.data.pageSize
        this.total =res.data.total
      })
      },
      //搜索商品
      changeSearch(val){
        if (!val) {
          this.pageList(1) //如果搜索不为空 则显示默认数量
          this.currentPage = 1
          this.type = 1
          return 
        }
        console.log('搜索',val);
        this.$api.getSearchList({
          search:val
        }).then((res) => {
            console.log(res.data);
            this.currentPage = 1
            if (res.data.status === 200) {
              this.list = res.data.result // 获取的搜索的总数据的条数
              // 处理分页
              this.total = res.data.result.length //获取搜索页面的总数量
              this.pageSize =3
              this.tableData =res.data.result.slice(0,3) //每页显示的数量
              this.type = 2
            }else{
              this.tableData= []
              this.type = 1
              this.total =1
              this.pageSize = 1
            }
        })
      },
      //弹出框添加商品
      addDialogGoods(){
        // this.dialogVisible = true
        this.$refs.dialog.dialogVisible = true,
        this.title = '添加商品'
      },
      //子组件传过来的自定义事件
      changeDialog(){
        this.dialogVisible = false
      },
      //删除商品按钮
    handleDelete(index,row){
      // console.log(index,row);
       this.$confirm('此操作将永久删除该商品, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //请求删除接口
          this.$api.getDeleteGoods({
            id:row.id
          }).then((res) => {
              this.$message({
              type: 'success',
              message: '删除成功!'
              
            });
            this.pageList(1) //刷新列表
          })
          
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    //编辑商品按钮
    handleEdit(index,row){
      this.$refs.dialog.dialogVisible = true,
      this.title = '编辑商品', // 弹窗商品的名称
      // console.log(index,row);
      this.rowData = {...row} //赋值rowData的数据
      // this.$refs.dialog.goodsForm = row

    }

    },
    created() {
      this.pageList(1)
    },
    

}
</script>

<style lang="less" scoped>
.goods{
  margin: 20px;
}
.header{
  display: flex;
  button{
    margin-left: 20px;
  }
}


</style>